<template>
  <PageContainer>
    <Header title="文件设置" :default-slot-content-height="128">
      <view class="hb-bg-white hb-h-16 hb-px-4 hb-flex hb-items-center">
        <FileResourceItem v-if="data" :item="data" :show-setting="false" />
      </view>
    </Header>
    <view>
      <view class="hb-m-4 hb-py-3 hb-px-4 hb-bg-white hb-box-shadow-base hb-rounded-xl">
        <TmText _class="hb-font-bold hb-mb-2" label="谁可以调用" :font-size="28" />
        <view class="hb-py-2">
          <!-- 私密 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileResourcePermissionTypeEnum.PRIVATE)"
          >
            <CustomRadio :checked="permission === FileResourcePermissionTypeEnum.PRIVATE" />
            <TmText label="私密" :font-size="24" />
            <TmText label="仅自己智能助手可调用" color="#969799" :font-size="24" />
          </view>
          <!-- 公开 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileResourcePermissionTypeEnum.PUBLIC)"
          >
            <CustomRadio :checked="permission === FileResourcePermissionTypeEnum.PUBLIC" />
            <TmText label="公开" :font-size="24" />
            <TmText label="平台所有智能助手可调用" color="#969799" :font-size="24" />
          </view>
          <!-- 部分可调用 -->
          <view
            class="hb-flex hb-items-center hb-gap-2 hb-mb-3"
            @click="handleChangePermission(FileResourcePermissionTypeEnum.PARTIAL_CALL)"
          >
            <CustomRadio :checked="permission === FileResourcePermissionTypeEnum.PARTIAL_CALL" />
            <TmText label="部分可调用" :font-size="24" />
          </view>
          <!-- 指定权限 -->
          <view class="hb-ml-7 hb-rounded-lg hb-bg-[#F7F8FA]">
            <view
              class="permission-wrapper"
              :class="{ expanded: permission === FileResourcePermissionTypeEnum.PARTIAL_CALL }"
            >
              <!-- 选择好友 -->
              <view class="hb-p-3 hb-border-b hb-border-solid hb-border-[#EBEDF0]">
                <view class="hb-flex hb-items-center hb-flex-wrap hb-gap-2 hb-mb-2">
                  <TmImage
                    v-for="(item, index) in selectedFriends"
                    :key="index"
                    :src="item.content"
                    :width="72"
                    :height="72"
                    :round="2"
                  />
                </view>
                <TmButton
                  icon="tmicon-plus"
                  :margin="[0, 0, 0, 16]"
                  :width="200"
                  :height="60"
                  outlined
                  :border="1"
                  color="primary"
                  label="选择好友"
                  :font-size="24"
                  :round="12"
                  @click="handleSelectFriends"
                />
                <TmText label="选中的好友可调用" color="#969799" :font-size="24" />
              </view>
              <!-- 选择标签 -->
              <view class="hb-p-3 hb-border-b hb-border-solid hb-border-[#EBEDF0]">
                <view
                  v-if="selectedTags.length"
                  class="hb-flex hb-items-center hb-flex-wrap hb-mb-2"
                >
                  <TmText
                    v-for="(v, index) in selectedTags"
                    :key="v.id"
                    _class="hb-mb-1"
                    :label="index !== selectedTags.length - 1 ? `${v.content}、` : v.content"
                    :font-size="24"
                  />
                </view>
                <TmButton
                  icon="tmicon-plus"
                  :margin="[0, 0, 0, 16]"
                  :width="200"
                  :height="60"
                  outlined
                  :border="1"
                  color="primary"
                  label="选择标签"
                  :font-size="24"
                  :round="12"
                  @click="handleSelectTags"
                />
                <TmText
                  label="标签里的好友可调用，若在标签中新增或移除好友，可调用范围也将更新"
                  color="#969799"
                  :font-size="24"
                />
              </view>
              <!-- 选择圈子 -->
              <view class="hb-p-3">
                <view class="hb-flex hb-items-center hb-flex-wrap hb-gap-2 hb-mb-2">
                  <TmImage
                    v-for="(item, index) in selectedCircles"
                    :key="index"
                    :src="item.content"
                    :width="72"
                    :height="72"
                    :round="2"
                  />
                </view>
                <TmButton
                  icon="tmicon-plus"
                  :margin="[0, 0, 0, 16]"
                  :width="200"
                  :height="60"
                  outlined
                  :border="1"
                  color="primary"
                  label="选择圈子"
                  :font-size="24"
                  :round="12"
                  @click="handleSelectCircles"
                />
                <TmText label="选中的圈子可调用" color="#969799" :font-size="24" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <BottomSubmit
        :hide-cancel-btn="false"
        cancel-btn-label="删除文件"
        cancel-btn-color="#EA5E0E"
        cancel-btn-border-color="#EA5E0E"
        submit-btn-label="保存设置"
        @cancel="handleDeleteFile"
        @submit="handleSaveSetting"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* fileResourceSetting 文件设置 */
  import { FileResourcePermissionTypeEnum } from '@/enums/PublicEnum';
  import FileResourceItem from '../components/FileResourceItem.vue';
  import {
    FileAuthInfo,
    KnowledgeBaseFileDetailResult,
    KnowledgeBaseFileSetting,
  } from '@/api/knowledgeBase/types';
  import {
    knowledgeBaseFileDelete,
    knowledgeBaseFileDetail,
    knowledgeBaseFileSetting,
  } from '@/api/knowledgeBase';
  import { Toast } from '@/utils';
  import { FileResourceSetting } from '@/router/types/modules';

  const data = ref<KnowledgeBaseFileDetailResult>();
  let success: FileResourceSetting['success'];

  const permission = ref<FileResourcePermissionTypeEnum>(FileResourcePermissionTypeEnum.PRIVATE);
  /** 已选好友 */
  const selectedFriends = ref<FileAuthInfo[]>([]);
  /** 已选标签 */
  const selectedTags = ref<FileAuthInfo[]>([]);
  /** 已选圈子 */
  const selectedCircles = ref<FileAuthInfo[]>([]);

  customOnload<'fileResourceSetting'>((op) => {
    knowledgeBaseFileDetail({ id: op.id }).then((res) => {
      selectedFriends.value = res.friendAvatarInfo;
      selectedTags.value = res.labelAvatarInfo;
      selectedCircles.value = res.circleAvatarInfo;
      permission.value = res.fileAuthType;
      data.value = res;
    });
    success = op.success;
  });

  function handleChangePermission(type: FileResourcePermissionTypeEnum) {
    permission.value = type;
  }

  /** 选择好友 */
  function handleSelectFriends() {
    navigateTo({
      name: 'selectFriends',
      options: {
        selected: selectedFriends.value.map((item) => item.id),
        success: (list) =>
          (selectedFriends.value = list.map((v) => ({ id: v.id, content: v.iconFileUrl }))),
      },
    });
  }

  /** 选择标签 */
  function handleSelectTags() {
    navigateTo({
      name: 'selectTags',
      options: {
        selected: selectedTags.value.map((item) => item.id),
        success: (list) => (selectedTags.value = list.map((v) => ({ id: v.id, content: v.label }))),
      },
    });
  }

  /** 选择圈子 */
  function handleSelectCircles() {
    navigateTo({
      name: 'selectCircles',
      options: {
        selected: selectedCircles.value.map((item) => item.id),
        success: (list) =>
          (selectedCircles.value = list.map((v) => ({ id: v.id, content: v.avatar }))),
      },
    });
  }

  /** 删除文件 */
  function handleDeleteFile() {
    if (data.value) {
      uni.showModal({
        title: '删除文件提示',
        content:
          '确认要删除文件？删除后，名片关联文件列表、好友共享文件列表、圈子文件列表均会同步删除！',
        confirmText: '确认删除',
        cancelColor: '#999996',
        cancelText: '取消',
        confirmColor: '#EA5E0E',
        success: ({ confirm }) => {
          if (confirm) {
            knowledgeBaseFileDelete({ id: data.value!.id }).then(() => {
              success?.();
              Toast({
                title: '删除成功',
                success: () => {
                  navigateBack();
                },
              });
            });
          }
        },
      });
    }
  }
  /** 保存设置 */
  function handleSaveSetting() {
    const params: KnowledgeBaseFileSetting = {
      id: data.value!.id,
      fileAuthType: permission.value,
    };
    if (params.fileAuthType === FileResourcePermissionTypeEnum.PARTIAL_CALL) {
      params.friendIds = selectedFriends.value.map((item) => item.id);
      params.labelIds = selectedTags.value.map((item) => item.id);
      params.circleIds = selectedCircles.value.map((item) => item.id);
    }
    knowledgeBaseFileSetting(params).then(() => {
      Toast({
        title: '保存成功',
        success: () => {
          navigateBack();
        },
      });
    });
  }
</script>

<style lang="scss" scoped>
  /* 内容样式 */
  .permission-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease, transform 0.3s ease;

    &.expanded {
      max-height: 2000px; /* 足够大的值以容纳内容 */
      opacity: 1;
      transform: translateY(0);
      transition: max-height 1s ease-in-out, opacity 0.5s ease, transform 0.5s ease;
    }
  }
</style>
